<template>
	<view class="event-container">
		<uni-nav-bar left-icon="back" title="事件列表" color="#fff" backgroundColor="#26dfd4" fixed
			@clickLeft="leftIconClick">
		</uni-nav-bar>
		<view class="content" :style="{marginTop:height +20 +'px'}">
			<view class="event-list" v-for="item in list" :key=item.id>
				<view class="event-list-title">
					<image src="../../static/event.png" mode=""></image>
					<text>{{item.eventName}}【{{item.sureStakeNo}}】</text>
				</view>
				<view class="event-list-content">
					<view class="desc">{{item.sceneDescribe}}</view>
					<view>
						<text>{{item.eventType && getEventType(item.eventType).name}}</text>
						<text class="text" v-if="item.eventLevel === '1'" style="color: #f10102;">【Ⅰ级】</text>
						<text class="text" v-else-if="item.eventLevel === '2'" style="color: #f3914a;">【Ⅱ级】</text>
						<text class="text" v-else-if="item.eventLevel === '3'" style="color: #efe50a;">【Ⅲ级】</text>
						<text class="text" v-else-if="item.eventLevel === '4'" style="color: #11e5e8;">【Ⅳ级】</text>
						<text class="text" v-else-if="item.eventLevel === '5'" style="color: #384aca;">【一般】</text>
						<text>{{item.createTime}} </text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		myRequest
	} from '../../utils/request.js'
	export default {
		data() {
			return {
				list: [],
				height: null
			}
		},
		onLoad() {
			let _this = this
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
				}
			})
			const info = uni.getStorageSync('info');
			let {
				nodeId,
				nodeType
			} = info
			this.getEventList(nodeId, nodeType)
		},
		methods: {
			// 获取事件列表
			async getEventList(nodeId, nodeType) {
				const token = uni.getStorageSync('token');
				uni.request({
					//#ifdef  H5
					url: `http://106.15.2.249:60000/ecs/system/analysis/findEventListByTypeAndOrgId?nodeId=${nodeId}&nodeType=${nodeType}&isPendingEvent=true`,
					//#endif
					//#ifdef  MP-WEIXIN
					url: `http://106.15.2.249:60000/ecs/system/analysis/findEventListByTypeAndOrgId?nodeId=${nodeId}&nodeType=${nodeType}&isPendingEvent=true`,
					//#endif
					method: 'GET',
					header: {
						'Authorization': 'Bearer ' + token,
					},
					success: (res) => {
						const {
							data,
							code
						} = res.data
						if (code === '200') {
							this.list = data
						}
					}
				})
			},
			leftIconClick() {
				uni.navigateTo({
					url: '/pages/index/index'
				});
			},
			getEventType(eventType) {
				// 交通事故  8802.道路施工  8803.恶劣天气   8804.交通拥堵  8805.火灾  8806.交通管制，8807.其他)
				// colorList: ['#f10102', '#f3914a', '#efe50a', '#11e5e8', '#384aca', '#5eeef4']
				switch (eventType) {
					case 8801:
						return {
							color: '#7f131f',
								name: '交通事故',
						}
						case 8802:
							return {
								color: '#7c4f14',
									name: '道路施工'
							}
							case 8803:
								return {
									color: '#7f8309',
										name: '恶劣天气'
								}
								case 8804:
									return {
										color: '#11e5e8',
											name: '交通拥堵'
									}
									case 8805:
										return {
											color: '#0a5c92',
												name: '火灾'
										}
										case 8806:
											return {
												color: '#0a8491',
													name: '交通管制'
											}
											case 8807:
												return {
													color: '#0a8491',
														name: '其他'
												}
												default:
													return {
														name: '测试'
													}

				}
			},
		}
	}
</script>

<style lang="less" scoped>
	@import './../../utils/mixin.less';

	view {
		box-sizing: border-box;
	}

	.event-container {
		/* border: 1px solid #d4d4d4; */
		padding: 20rpx;
		padding-top: 0;

		.event-list {
			width: 100%;
			.box-shadow();
			border-radius: 6rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.event-list-title {
				padding: 20rpx 0;
				border-bottom: 1px solid #d4d4d4;
				display: flex;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					border: 1px solid #d4d4d4;
					border-radius: 50%;
				}

				text {
					color: #000;
					font-weight: 700;
					font-size: 28rpx;
					margin-left: 4rpx;
				}
			}
		}

		.event-list-content {
			font-size: 24rpx;

			.desc {
				line-height: 60rpx;
			}

			.text {
				color: #7f131f;
			}

		}
	}
</style>
